<template>
  <div class="main box-tran-level">
    <section>
      <div class="filter-container" style="text-align:right">
        <el-button v-if="rightsButtons['record']" class="filter-item" type="primary" @click="toRecord">操作记录</el-button>
      </div>
      <el-table :data="list" v-loading="userListLoading" border highlight-current-row class="aaa">
        <el-table-column align="center" label="ID" prop="commissionConfigId"></el-table-column>
        <el-table-column align="center" label="等级" prop="levelId"></el-table-column>
        <el-table-column align="center" label="等级名称" prop="levelName"></el-table-column>
        <el-table-column align="center" label="获得奖金" prop="commissionRate">
          <template slot-scope="scope">
            <span>推荐奖：{{scope.row.commissionRate}}%</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" v-if="rightsButtons['edit']">
          <template slot-scope="scope">
            <el-button type="primary" plain size="mini"  @click="showEdit(scope.row.commissionConfigId)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </section>
  </div>
</template>
<script>
import Tinymce from '@/components/Tinymce'
  export default {
     components: {
      Tinymce
    },
    name: 'NewBoxLevel',
    data () {
      return {
        tinymceId: 'vue-tinymce-' + +new Date(),
        userListLoading: false,
        listLoading: false,
        listQuery: {
          pageIndex: 1,
          pageSize: 10,
          month: ''
        },
        list: [],
        listTotal: 0,
        today: null,
        mobileList: [],
        monthList: [],

        dialogTitle: '',
        dialogFormVisible: false,
        dialogFormData: {},
        btnLoading: false,
        rowData:{}
      }
    },
    created () {
      this.getList ()
    },
    activated () {
      let myDate = new Date()
      this.today = myDate.getDate()
    },
    methods: {
      toRecord () {
        this.$router.push({name:'boxTransLevelRecord'})
      },
      add () {
        this.$router.push({ name : 'boxTransLevelEdit'})
      },
      search () {
        this.getList()
      },
      // 虚假排行榜-生成列表查询
      getList () {
        this.listLoading = true
        this.request({
          url: '/bsnl-product/box/privilege-commission-config/list',
          method: 'get',
          data: this.listQuery
        }).then((res) => {
          this.list = res.data
          this.listTotal = res.totalCount
          this.listLoading = false
        }).catch(err => {
          console.log(err)
          this.list = []
          this.listTotal = 0
          this.listLoading = false
        })
      },
      handleCurrentChange (val) {
        this.listQuery.pageIndex = val
        this.getList()
      },
      handleSizeChange (val) {
        this.listQuery.pageSize = val
        this.getList()
      },
      // 显示修改弹窗
      showEdit(id) {
        this.$router.push({ name : 'boxTransLevelEdit', params : {id :id}})
      },
      handleSave() {
         this.$refs.form.validate(valid => {
            if (!valid) {
                return false;
            }
            const updateData = {
            ...this.dialogFormData,
            salesVolumeExt:this.dialogFormData.salesVolumeExt?this.dialogFormData.salesVolumeExt:0
          }
          this.request({
            url: '/bsnl-member/member/sales-ranking/officialUser/update',
            method: 'post',
            data:updateData
            
          }).then((res) => {
            this.getList()
            this.dialogFormVisible = false
            this.$message.success('修改成功')
          }).catch(err => {
            console.log(err)
          })
         })          
      },
      uploadSuccess(res) {
        this.dialogFormData.imagePhotoUrl = this.replaceImgUrl(res.filePath);
      },
      beforeUploadImg(file) {
        if (!file.type.match('image/')) {
          this.$message.error('请上传图片')
          return false
        }
        const isLt5M = file.size / 1024 / 1024 < 5
        if (!isLt5M) {
          this.$message.error('上传图片大小不能超过 5MB!')
        }
        return isLt5M
      },
    }
  }
</script>
<style lang="scss" scoped>
.box-tran-level {
  .btn-center {
    text-align: center;
  }
}
.aaa{
   margin-bottom: 20px;
}
/deep/ .el-dialog {
  max-width: 1150px !important;
}
</style>